<template>
  <div>
    <h3 class="examTitle">组卷信息</h3>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <el-button type="primary" icon="el-icon-plus" @click="addQuestion">添加题库</el-button>
        </span>
        <span style="float: right;color: red; padding: 3px 0" type="text">试卷总分：{{examineForm.totalPoints}}分</span>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="题库"
         >
          <template slot-scope="scope">
            <el-select v-model="scope.row.questionBankId" @change="(value)=>{return selectQuestionBank(value,scope.$index)}" filterable placeholder="选择或搜索题库">
              <el-option
                v-for="item in questionBanks"
                :key="item.id"
                :label="item.questionBlankName"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          prop="singleChoiceSelectCount"
          label="单选数量"
          >
          <template slot-scope="scope">
              <el-row>
                <el-col :span="12">
                  <el-input-number @change="calculateTotalScore" style="width: 100%" :controls="false" :min="0" :max="scope.row.singleChoiceTotal" v-model="scope.row.singleChoiceSelectCount"></el-input-number>
                </el-col>
                <el-col :span="12">
                  <span>/{{scope.row.singleChoiceTotal}}</span>
                </el-col>
              </el-row>


          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="单选分数">

          <template slot-scope="scope">
            <el-input-number @change="calculateTotalScore" v-model="scope.row.singleChoiceScore" style="width: 100%" :controls="false" :min="0" :max="100"></el-input-number>
          </template>

        </el-table-column>

        <el-table-column
          prop="name"
          label="多选数量"
        >
          <template slot-scope="scope">
            <el-row>
              <el-col :span="12">
                <el-input-number @change="calculateTotalScore" style="width: 100%" :controls="false" :min="0" :max="scope.row.multipleChoiceTotal"  v-model="scope.row.multipleChoiceSelectCount"  ></el-input-number>
              </el-col>
              <el-col :span="12">
                <span>/{{scope.row.multipleChoiceTotal}}</span>
              </el-col>
            </el-row>


          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="多选分数">
          <template slot-scope="scope">
            <el-input-number @change="calculateTotalScore" style="width: 100%" :controls="false" :min="0" :max="100"  v-model="scope.row.multipleChoiceScore"  ></el-input-number>
          </template>

        </el-table-column>

        <el-table-column
          prop="name"
          label="判断题数量"
        >
          <template slot-scope="scope">
            <el-row>
              <el-col :span="12">
                <el-input-number @change="calculateTotalScore" style="width: 100%" :controls="false" :min="0" :max="scope.row.trueorfalseQuestionsTotal" v-model="scope.row.trueorfalseQuestionsSelectCount"></el-input-number>
              </el-col>
              <el-col :span="12">
                <span>/{{scope.row.trueorfalseQuestionsTotal}}</span>
              </el-col>
            </el-row>

          </template>

        </el-table-column>
        <el-table-column
          prop="address"
          label="判断题分数">
      <template slot-scope="scope">
        <el-input-number @change="calculateTotalScore" style="width: 100%" :controls="false" :min="0" :max="scope.row.trueorfalseQuestionsTotal==0?0:100" v-model="scope.row.trueorfalseQuestionsScore"></el-input-number>
      </template>

        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="delClick(scope.$index)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <h3 class="examTitle">考试配置</h3>
    <el-card class="box-card">
      <el-form :model="examineForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="examineForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="examineForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker type="date" placeholder="选择日期" v-model="examineForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker placeholder="选择时间" v-model="examineForm.date2" style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
          <el-switch v-model="examineForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="examineForm.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="examineForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input type="textarea" v-model="examineForm.desc"></el-input>
        </el-form-item>

      </el-form>
    </el-card>

    <h3 class="examTitle">权限配置</h3>
    <el-card class="box-card">
      <el-radio v-model="radio1" label="1" border>完全公开</el-radio>
      <el-radio v-model="radio1" label="2" border>部门开放</el-radio>
    </el-card>
    <div v-if="radio1==2">
        <el-input
          v-model="deptName"
          placeholder="请输入部门名称"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px"
        />

      <el-tree
        :data="deptOptions"
        :props="defaultProps"
        show-checkbox
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        node-key="id"
        default-expand-all
        highlight-current
        @node-click="handleNodeClick"
      />
    </div>
    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
  </div>

</template>

<script>
import { getQuestionBankAllList } from "@/api/exam/questionBank";
import {deptTreeSelect} from "@/api/system/user";

export default {
  name: "AddExam",
  watch: {
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      examineForm:{
        examGeneratingPaper: [
        ],
        totalPoints: 0,
        // "examName": "",
        // "examDescribe": "",
        // "totalPoints": 0,
        // "passMark": 0,
        // "examDuration": 0,
        // "isTimeLimit": 0,
        // "examType": 0,
        deptIds: ""
      },
      deptIdsArray:[],
      tableData: [],
      questionBanks:[],
      selectedQuestionBankId:[],
      questionBanksAll:[],

      radio1: '',
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },

      deptName: '',
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "label"
      }



    }
  },
  created() {
    getQuestionBankAllList().then(res => {
      console.log(res,"res-->")
      this.questionBanks = res.data
      this.questionBanksAll = res.data;
    })
    this.getDeptTree();
  },
  methods: {

    calculateTotalScore(value){
       this.examineForm.totalPoints = 0;
       //单选题
       this.tableData.forEach(item => {
        this.examineForm.totalPoints += item.singleChoiceScore * item.singleChoiceSelectCount + item.multipleChoiceScore * item.multipleChoiceSelectCount + item.trueorfalseQuestionsScore * item.trueorfalseQuestionsSelectCount
      })
      console.info(this.examineForm.totalPoints,"this.examineForm.totalPoints")
    },
    submitForm(formName) {
      this.deptIdsArray = [];
      this.$refs.tree.getCheckedNodes().forEach(item => {
        this.deptIdsArray.push(item.id)
      })
      this.examineForm.deptIds = this.deptIdsArray.join(",")

      this.examineForm.examGeneratingPaper = this.tableData;
      console.info( this.examineForm ,"this.examineForm-->")
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    getQuestionBanks() {
      this.questionBanks = []
    },
    selectQuestionBank(val,rowIndex){
      console.log(val,"val-->")
      console.log(rowIndex,"rowIndex-->")
      console.log(this.tableData,"this.tableData-->")
      this.questionBanks.forEach(item => {
        if(item.id == val){
          console.info(item,"item--->")
          this.tableData[rowIndex].questionBlankId = val;
          this.tableData[rowIndex].questionBlankName = item.questionBlankName
          this.tableData[rowIndex].singleChoiceScore = 0;
          this.tableData[rowIndex].singleChoiceTotal = item.singleChoice;
          this.tableData[rowIndex].singleChoiceSelectCount = 0;
          this.tableData[rowIndex].multipleChoiceSelectCount = 0;
          this.tableData[rowIndex].multipleChoiceTotal = item.multipleChoice;
          this.tableData[rowIndex].multipleChoiceScore = 0;
          this.tableData[rowIndex].trueorfalseQuestionsScore = 0;
          this.tableData[rowIndex].trueorfalseQuestionsTotal = item.trueorfalseQuestions;
          this.tableData[rowIndex].trueorfalseQuestionsSelectCount = 0;

        }
      })

    },
    addQuestion() {
       this.tableData.push({})
        this.resetQuestionBanksByTableData()
    },
    delClick(index) {
      this.tableData.splice(index, 1);
      this.resetQuestionBanksByTableData()
    },
    resetQuestionBanksByTableData(){
      this.selectedQuestionBankId = [];
      if(this.tableData.length>0){
        this.tableData.forEach(item => {
          this.selectedQuestionBankId.push(item.questionBankId);
        })
        console.info(this.tableData,"resetQuestionBanksByTableData this.tableData-->")
        console.info(this.questionBanksAll,"resetQuestionBanksByTableData this.questionBanksAll-->")
        console.info(this.selectedQuestionBankId,"resetQuestionBanksByTableData this.selectedQuestionBankId-->")
        this.questionBanks = this.questionBanksAll.filter(item => {
          return !this.selectedQuestionBankId.includes(item.id)
        })
        console.info(this.questionBanks," resetQuestionBanksByTableData this.questionBanks-->")
      }else{
        this.questionBanks = this.questionBanksAll;
      }
    }

  }
}
</script>

<style scoped>
 .examTitle{
   margin-left: 20px;
 }
</style>
